import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:mvvm_provider/base/consumer_status_widget.dart';
import 'package:mvvm_provider/page/bookshelf/states/book_shelf_detail_state.dart';
import 'package:mvvm_provider/page/home/data/model/cartoon_model_entity.dart';
import 'package:status_bar_control/status_bar_control.dart';
import '../../../base/base_stateful_page.dart';
import '../../../base/consumer_widget.dart';
import '../../../routers/navigator_utils.dart';
import '../../../widgets/delay_button.dart';
import '../../home/widgets/bottom_content_widget.dart';
import '../../home/widgets/des_widget.dart';
import '../../home/widgets/novel_header_widget.dart';
import '../../home/widgets/recommend_widget.dart';
import '../../home/widgets/series_widget.dart';
import '../view_model/bookshelf_detail_view_model.dart';
import '../view_model/bookshelf_offset_view_model.dart';

/// FileName: BookShelfDetailPage
/// Description: 单页面,多接口 串行 请求数据案例
/// Author: muziyuting
/// Date: 2023/10/02
///

const APPBAR_SCROLL_OFFSET = 100;

class BookShelfDetailPage extends BasePage {
  final String imageUrl;
  const BookShelfDetailPage({super.key, required this.imageUrl});

  @override
  BasePageState<BasePage> getState() {
    return _BookShelfDetailPage();
  }
}

class _BookShelfDetailPage extends BasePageState<BookShelfDetailPage> {
  @override
  void initState() {
    super.initState();
    isRenderHeader = false;
    pageBgColor = const Color(0xFFF3F4F8);
  }

  @override
  void buildComplete() {
    super.buildComplete();
    _getData();
  }

  /// 请求数据
  _getData() {
    getViewModel<BookShelfDetailViewModel>().getData();
  }

  _onScroll(offset) {
    /// offset滚动距离
    double alpha = offset / APPBAR_SCROLL_OFFSET;
    if (alpha < 0) {
      alpha = 0;
    } else if (alpha > 1) {
      alpha = 1;
    }
    if (alpha == 0) {
      StatusBarControl.setStyle(StatusBarStyle.LIGHT_CONTENT);
    } else if (alpha == 1) {
      StatusBarControl.setStyle(StatusBarStyle.DARK_CONTENT);
    }
    getViewModel<BookShelfOffsetlViewModel>().changeAppBarAlphaAndOffset(alpha, offset);
  }

  /// 导航栏
  Widget _navWidget() {
    /// 改变元素透明度,自定义了一个appbar
    return ConsumerWidget<BookShelfOffsetlViewModel, BookShelfDetailState>(
      builder: (context, state, child) {
        return Opacity(
          opacity: state.appBarAlpha,
          child: Container(
            height: statusBarH + kToolbarHeight,
            alignment: Alignment.center,
            padding: EdgeInsets.only(left: 50.w, right: 50.w, top: 40.h),
            decoration: BoxDecoration(
              color: Colors.white,
              border: Border(
                bottom: BorderSide(width: 1.h, color: Colors.black12),
              ),
            ),
            child: Row(
              children: [
                Container(
                  width: state.offset >= 150.h ? 1.sw - 150.w : 1.sw - 110.w,
                  margin: EdgeInsets.only(right: 10.w),
                  child: Text(
                    getViewModel<BookShelfDetailViewModel>().state.mainModel?.title ?? '',
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(fontSize: 15.sp),
                  ),
                ),
                Visibility(
                  visible: state.offset >= 150.h ? true : false,
                  child: Container(
                    alignment: Alignment.center,
                    width: 40.w,
                    height: 20.h,
                    decoration: BoxDecoration(
                        color: Colors.orange,
                        border: Border.all(width: 1.w, color: Colors.orange),
                        borderRadius: BorderRadius.only(
                            topLeft: Radius.circular(6.h), bottomRight: Radius.circular(6.h))),
                    child: Text(
                      '追书',
                      style: TextStyle(
                          color: Colors.white, fontSize: 12.sp, fontWeight: FontWeight.w500),
                    ),
                  ),
                ),
              ],
            ),
          ),
        );
      },
    );
  }

  /// 返回按钮
  Widget _backBtn() {
    return ConsumerWidget<BookShelfOffsetlViewModel, BookShelfDetailState>(
      builder: (context, state, child) {
        return Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            DelayButton(
              width: 48.w,
              margin: EdgeInsets.only(top: 20.h),
              height: ScreenUtil().statusBarHeight + kToolbarHeight,
              onTap: () {
                NavigatorUtils.pop(context);
              },
              mainWidget: Align(
                child: Image.asset("assets/images/back_black.png",
                    fit: BoxFit.cover,
                    color: state.appBarAlpha == 1 ? Colors.black : Colors.white,
                    width: 26.w,
                    height: 30.w),
              ),
            ),
            DelayButton(
              width: 48.w,
              margin: EdgeInsets.only(top: 20.h),
              height: ScreenUtil().statusBarHeight + kToolbarHeight,
              onTap: () {
                StatusBarControl.setStyle(StatusBarStyle.DARK_CONTENT);
              },
              mainWidget: Align(
                child: Image.asset("assets/images/ZCIcon_share_normal@3x.png",
                    fit: BoxFit.cover,
                    color: state.appBarAlpha == 1 ? Colors.black : Colors.white,
                    width: 26.w,
                    height: 26.w),
              ),
            ),
          ],
        );
      },
    );
  }

  /// 底部widget
  Widget _bottomWidget(CartoonModelData mainModel) {
    return Positioned(
        left: 0,
        bottom: bottomSafeBarH,
        child: BottomContentWidget(
          epList: mainModel.ep,
        ));
  }

  /// 文字说明
  Widget _textualDescriptionWidget() {
    return Positioned(
        child: Center(
      child: Container(
        alignment: Alignment.center,
        height: 50.h,
        width: 1.sw - 100.w,
        padding: EdgeInsets.symmetric(horizontal: 15.w),
        color: Colors.blue,
        child: const Text(
          '单页面 多接口 串行 请求数据 + 局部刷新 案例',
          style: TextStyle(color: Colors.white),
        ),
      ),
    ));
  }

  @override
  Widget buildPage(BuildContext context) {
    return ConsumerStatusWidget<BookShelfDetailViewModel, BookShelfDetailState>(
      placeHolderType: PlaceHolderType.detailPlaceHolder,
      builder: (context, state, child) {
        return Stack(
          children: [
            //移除上部的距离
            MediaQuery.removePadding(
              removeTop: true, //移除上部
              context: context,
              //监听滚动
              child: NotificationListener(
                onNotification: (scrollNotification) {
                  if (scrollNotification is ScrollUpdateNotification &&
                      scrollNotification.depth == 0) {
                    //发生滚动并且是第0个元素
                    _onScroll(scrollNotification.metrics.pixels);
                  }
                  return false;
                },
                child: Container(
                  color: Colors.white,
                  margin: EdgeInsets.only(bottom: bottomSafeBarH + 20.h),
                  child: ListView(
                    physics: const ClampingScrollPhysics(),
                    children: [
                      /// 头部widget && 描述widget
                      NovelHeaderWidget(
                        model: state.mainModel!,
                        imageUrl: widget.imageUrl,
                      ),
                      DesWidget(
                        model: state.mainModel!,
                      ),
                      SeriesWidget(seriesList: state.seriesList),
                      RecommendWidget(list: state.recommendList)
                    ],
                  ),
                ),
              ),
            ),

            _navWidget(),
            _backBtn(),
            _bottomWidget(state.mainModel!),
            _textualDescriptionWidget(),
          ],
        );
      },
    );
  }
}
